<template>
  <div class="scoreAll">
    <div class="basicInfo">
      <!-- style="flex: 1.5;" -->
      <div>
        <span>
          赛事名称：
          <b>{{platoonMatch.com_name}}</b>
        </span>
        <span>
          裁判长：
          <b>{{platoonMatch.referee_name}}</b>
        </span>
      </div>
      <div style="flex: 2;display: flex;justify-content: flex-end;align-items: baseline;">
        <span class="countScene">{{countScene}}场</span>
        <div class="date">
          <el-select v-model="date" size="small" placeholder="请选择时间" @change="change" style="width:150px;">
            <el-option v-for="(item, index) in platoonList.date" :key="`${index}q`" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <div class="btnGroup">
          <el-button type="primary" class="goMatchForm" :class="{'gray':tips}" size="medium" @click="scheduleAuto">一键排战</el-button>
          <el-button type="primary" class="goMatchForm" size="medium" @click="scheduleHandle">手动排战</el-button>
          <el-button type="primary" class="goMatchForm" size="medium" @click="handleEditschedule">修改排战信息</el-button>
          <el-button type="primary" class="goMatchForm" size="medium" @click="cancelSchedule">取消未开始比赛</el-button>
          <el-button type="primary" class="goMatchForm" size="medium" @click="pushAutoSchedule">保存</el-button>
        </div>
      </div>
    </div>
    <!-- 新增修改排战信息 -->
    <el-dialog title="修改排战信息" :visible.sync="dialogFormVisible" width="50%" :modal="false">
      <el-form :model="dialogForm">
        <el-form-item label="已有时间：">{{com_time.join()}}</el-form-item>
        <el-form-item label="新增时间：">
          <div class="format">
            <div class="dateBox" v-for="(item, index, key) in dialogForm.date" :key="key" style="margin-bottom: 20px;margin-left:82px;">
              <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="dialogForm.date[index]" type="date"
                placeholder="选择日期"></el-date-picker>
              <i class="iconfont icon-roundaddlight" v-if="index==dialogForm.date.length-1" style="font-size:24px;vertical-align:middle;margin-left:20px;color:#409EFF;cursor:pointer;"
                @click="addDate(item)"></i>
              <i class="el-icon-remove-outline" v-if="index==dialogForm.date.length-1 && dialogForm.date.length !=1"
                style="font-size:24px;vertical-align:middle;margin-left:10px;color:#409EFF;cursor:pointer;" @click="reduceDate(index)"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item label>
          <div style="display:flex">
            <div style="width: 82px">已有场地：</div>
            <div style="width: 90%;display:flex;flex-wrap: wrap;">
              <el-input clearable type="text" style="width: 220px;margin-bottom: 20px;" v-for="(item, ground_name_index) in ground_name"
                :key="`${ground_name_index}a`" @blur="verify(item, ground_name_index)" v-model="ground_name[ground_name_index]"
                placeholder="请输入内容"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="新增场地：">
          <div class="format">
            <div class="dateBox" v-for="(item,index,key) in dialogForm.field" :key="key" style="margin-bottom: 20px;margin-left:82px">
              <el-input clearable type="text" style="width:220px" v-model="dialogForm.field[index]" placeholder="请输入内容"></el-input>
              <i class="iconfont icon-roundaddlight" v-if="index==dialogForm.field.length-1" style="font-size:24px;vertical-align:middle;margin-left:20px;color:#409EFF;cursor:pointer;"
                @click="addField(index)"></i>
              <i class="el-icon-remove-outline" v-if="index==dialogForm.field.length-1 && dialogForm.field.length !=1"
                style="font-size:24px;vertical-align:middle;margin-left:10px;color:#409EFF;cursor:pointer;" @click="reduceField(index)"></i>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.stop="confirmDialogForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增 el-checkbox-->
    <div style="display: flex;margin-top: 10px;background-color: rgba(66, 185, 131, 0.2);border-radius: 2px;padding: 15px;flex-wrap: wrap;">
      <div v-for="(teams,teamsIndex) in teamsInfo" :key="`${teamsIndex}b`">
        <el-checkbox v-model="teams[teamsIndex]" @change="teamsRoundSelected(teams,teamsIndex)">{{teams.project}}（{{teams.signUp_num}}）</el-checkbox>
      </div>
    </div>
    <div class="tableBox" v-loading="loading">
      <div class="tableMain">
        <!--<el-scrollbar style="height: 100%;">-->
        <table class="table1">
          <thead>
            <tr>
              <td rowspan="2">组别</td>
              <td rowspan="2">签位</td>
              <td :colspan="2*firstRounds.length">第一阶段轮次</td>
              <td :colspan="2*secondRounds.length" v-if="secondRounds.length > 0">第二阶段轮次</td>
            </tr>
            <tr>
              <td colspan="2" v-for="(firstR,firstRIndex) in firstRounds" :key="`${firstRIndex}c`">R{{firstRIndex+1}}</td>
              <td colspan="2" v-for="(secondR,secondRIndex) in secondRounds" :key="`${secondRIndex}d`">R{{secondRIndex+1}}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(teams, teamsIndex) in teamsInfo" :key="`${teamsIndex}Z`" v-if="teams.signUp_num && teams[teamsIndex]"
              @click="getColor(teamsInfo, teamsIndex)">
              <td>{{teams.project}}({{teams.signUp_num}})</td>
              <td>{{teams.roundInfo.draw}}</td>
              <td colspan="2" v-for="(rounds,roundsIndex) in teams.rounds[0]" :key="roundsIndex+100" :class="roundsSelected[0][teamsIndex][roundsIndex].disable?'tdDisable':'tdActive'">
                <div>
                  <span style="width: 16px;float: left;margin-left: 5px;margin-top: 7px;">{{roundsSelected[0][teamsIndex][roundsIndex].count}}/{{roundsSelected[0][teamsIndex][roundsIndex].countLength}}</span>
                  <el-select v-model="roundsSelected[0][teamsIndex][roundsIndex].radio" size="mini" placeholder=" "
                    :disabled="roundsSelected[0][teamsIndex][roundsIndex].disable" style="width: 55px;float: right;margin-right: 5px"
                    @change="tipsChange">
                    <el-option v-for="(item, index) in optionsSelect" :key="`${index}e`" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </td>
              <td colspan="2" v-for="(blank,blankIndex) in firstRounds" v-if=" blankIndex + 1 > teams.rounds[0].length"
                :key="`${blankIndex}f`" class="tdActive"></td>
              <td colspan="2" v-for="(rounds,roundsIndex) in teams.rounds[1]" :key="roundsIndex+200" :class="roundsSelected[1][teamsIndex][roundsIndex].disable?'tdDisable':'tdActive'">
                <span style="width: 16px;float: left;margin-left: 5px;margin-top: 7px;">{{roundsSelected[1][teamsIndex][roundsIndex].count}}/{{roundsSelected[1][teamsIndex][roundsIndex].countLength}}</span>
                <el-select v-model="roundsSelected[1][teamsIndex][roundsIndex].radio" size="mini" placeholder=" "
                  :disabled="roundsSelected[1][teamsIndex][roundsIndex].disable" style="width: 55px;float: right;margin-right: 5px;"
                  @change="tipsChange">
                  <el-option v-for="(item, index) in optionsSelect" :key="`${index}g`" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </td>
              <td colspan="2" v-for="(blank,blankIndex) in secondRounds" v-if=" blankIndex + 1 > teams.rounds[1].length"
                :key="`${blankIndex}g`" class="tdActive"></td>
            </tr>
          </tbody>
        </table>
        <!--</el-scrollbar>-->
        <el-scrollbar style="height: 800px; box-shadow: 1px 0px 9px 2px #9999; margin-top: 30px;width: 100%;"
          wrap-class="tableScorll" :native="false">
          <table class="fixed_headers">
            <thead>
              <tr>
                <th>场序</th>
                <th v-for="(ground,groundIndex) in platoonName" :key="`${groundIndex}j`">
                  <div>
                    <el-checkbox v-model="ground.checked">{{ground.ground_name}}</el-checkbox>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody v-if="show">
              <tr v-for="(playNumList,GroundIndex) in platoonGrounds" :key="`${GroundIndex}i`">
                <td style="vertical-align: middle;text-align: center;">
                  <div class="groundIndex"><el-checkbox v-model="playNumList[0].checked">{{GroundIndex+1}}</el-checkbox></div>
                </td>
                <td v-for="(playerNum,playerIndex) in playNumList" :key="`${playerIndex}h`" class="platoonBg">
                  <div class="panel__body--list--playground">
                    <div v-for="(element,elementIndex) in playerNum.list" :key="`${elementIndex}k`" class="panel__body--item--playground">
                      <div style="position: relative" class="battleBox" v-if="elementIndex < 1 && element" :class="dragDisabled(playNumList[playerIndex].list[0])?'publishBattleBox':''">
                        <div class="customColor" :style="{ background: playNumList[playerIndex].list[0].color}"></div>
                        <div style="display: flex;justify-content: space-between;align-items: baseline;">
                          <el-input v-if="GroundIndex==0" v-model="element.note" size="mini" :disabled="dragDisabled(playNumList[playerIndex].list[0])"
                            style="width: 83%;margin: 0 1%;" placeholder="开始时间"></el-input>
                          <el-input v-else v-model="element.note" size="mini" :disabled="dragDisabled(playNumList[playerIndex].list[0])"
                            style="width: 83%;margin: 0 1%;color: #666" placeholder="紧跟前场">紧跟前场</el-input>
                          <div style="margin-right: 5px;color: #666666">#{{GroundIndex+1}}</div>
                        </div>
                        <!--一盘 1场 三盘 3场 五盘 5场-->
                        <div class="playerName">
                          <div :class="element.name_a==element.win_site?'winner':''">
                            <span v-if="element.team_name_a">{{element.team_name_a}}</span>
                            <span v-else>{{element|playerName('a')}}</span>
                          </div>
                          <div class="vsGround">
                            <div class="VS">VS</div>
                            <div class="numBox" v-for="(game,gameIndex) in element.score" :key="`${gameIndex}m`" v-if="gameIndex < 4">
                              <div class="numTop">
                                <div style="display: flex;">
                                  <div style="width:50%;text-align: right;">{{game.top}}</div>
                                  <div style="font-size: 8px;position: relative;transform: scale(0.9, 0.9);width: 50%;text-align: left;"
                                    v-if="game.top < game.bot">{{game.tiebreak}}</div>
                                </div>
                              </div>
                              <div>
                                <div style="display: flex;">
                                  <div style="width:50%;text-align: right;">{{game.bot}}</div>
                                  <div style="font-size: 8px;position: relative;transform: scale(0.9, 0.9);width: 50%;text-align: left;"
                                    v-if="game.top > game.bot">{{game.tiebreak}}</div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="border-bottom: 1px dashed #6666;" :class="element.name_b==element.win_site?'winner':''">
                            <span v-if="element.team_name_b">{{element.team_name_b}}</span>
                            <span v-else>{{element|playerName('b')}}</span>
                          </div>
                        </div>
                        <div class="playerInfo">
                          <!-- 轮次名称 -->
                          <div>{{element.group_name}}</div>
                          <div v-if="element.com_system_type == 5">{{ element.second_order + 1 }}区 {{ element | wheelName }}</div>
                          <div v-else>
                            {{ element | wheelName }}
                          </div>
                          <!-- 循环+淘汰  循环+循环 -->
                          <!-- <div v-if="element.com_system_type == 1 || element.com_system_type == 4"> -->
                            <!-- 第{{ element.stage }}阶段 -->
                            <!-- <span v-if="element.stage == 1 || element.com_system_type == 4">第{{ element.wheel }}轮</span> -->
                            <!-- <span v-if="element.stage == 2 && element.com_system_type == 1">{{ element | wheelName }}</span> -->
                           <!-- </div> -->
                          <!-- 预选赛 -->
                          <!-- <div v-else-if="element.com_system_type == 5">{{ element.second_order + 1 }}区 {{ element | wheelName }}</div> -->
                          <!-- 单循环 -->
                          <!-- <div v-else-if="element.com_system_type == 2">第{{ element.wheel }}轮</div> -->
                          <!-- 单淘汰 -->
                          <!-- <div v-else> -->
                            <!-- <span>{{ element | wheelName }}</span> -->
                          <!-- </div> -->
                          <div style="display: flex;justify-content: space-between;align-items: baseline;margin: 0 10%;text-align: left;">
                            <div v-if="element.referee">{{element.referee}}</div>
                            <div v-if="element.match_time">{{element.match_time}}</div>
                          </div>
                          <div style="text-align: left;margin-left: 5px;"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
            <div class="morebox">
              <div class="more" @click="moreField">
								+
                <!-- <i class="iconfont icon-add" style="margin-left: 7px;"></i> -->
              </div>
            </div>
          </table>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  import schedule from "../../../utils/schedule.js";
  import customColorArr from "@/utils/customColor.js";
  export default {
    //用了二维数组刷出来的，可以优化成一维数组，参考sudo 数独
    data() {
      return {
        PGNumList: [
          [{
              id: 1,
              list: []
            },
            {
              id: 2,
              list: []
            },
            {
              id: 3,
              list: []
            },
            {
              id: 4,
              list: []
            },
            {
              id: 5,
              list: []
            },
            {
              id: 6,
              list: []
            }
          ],
          [{
              id: 1,
              list: []
            },
            {
              id: 2,
              list: []
            },
            {
              id: 3,
              list: []
            },
            {
              id: 4,
              list: []
            },
            {
              id: 5,
              list: []
            },
            {
              id: 6,
              list: []
            }
          ],
          [{
              id: 1,
              list: []
            },
            {
              id: 2,
              list: []
            },
            {
              id: 3,
              list: []
            },
            {
              id: 4,
              list: []
            },
            {
              id: 5,
              list: []
            },
            {
              id: 6,
              list: []
            }
          ]
        ],
        hasDiy: false,
        isGroup: 0,
        date: "",
        showDate: [],
        activeProjectIndex: 0,
        matchName: "",
        refereeName: "",
        projectSelected: {},
        optionsSelect: [],
        loading: true,
        groundChecked: [],
        countDisable: [],
        tips: false,
        countScene: 0,
        dialogFormVisible: false,
        dialogForm: {
          date: [""],
          field: [""]
        },
        com_time: [],
        ground_name: [],
        show: true
      };
    },
    created() {
      this.init();
    },
    filters: {
      playerName: (battle, type) => {
        return schedule.Name(battle, type);
      },
      wheelName: battle => {
        return battle.wheel_name
        // return schedule.wheelName(battle);
      }
    },
    computed: {
      ...mapState({
        platoonMatch: "platoonMatch",
        platoonInfo: "platoonInfo",
        platoonGrounds: "platoonGrounds",
        platoonName: "platoonName",
        roundsSelected: "roundsSelected",
        teamsInfo: "teamsInfo",
        firstRounds: "firstRounds",
        secondRounds: "secondRounds",
        platoonList: "platoonList",
        platoonDate: "platoonDate"
      }),
      dragDisabled() {
        return function(item) {
          if (item) {
            return item.status == 2 ? true : false;
          } else {
            return false;
          }
        };
      }
    },
    watch: {
      date(val) {
        this.$store.commit("setPlatoonDate", val);
      }
    },
    methods: {
      //获取随机颜色
      getRandomColor() {
        return (
          "#" +
          ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6)
        );
      },
      getColor(teamsInfo, teamsIndex) {
        for (const i of this.platoonGrounds) {
          for (const j of i) {
            let temp = j.list[0] ? j.list[0].group_id : "";
            if (temp == teamsInfo[teamsIndex].project_id) {
              j.list[0].color = customColorArr[teamsIndex] ?
                customColorArr[teamsIndex] :
                this.getRandomColor();
            } else {
              if (j.list[0]) {
                j.list[0].color = ''
              }
            }
          }
        }
        //解决视图不会重新渲染问题 =>mapState里的值 采用v-if或者this.$forceUpdate()
        this.show = false;
        this.show = true;
      },
      reduceDate(index) {
        this.dialogForm.date.splice(index, 1);
      },
      addDate(currentItem) {
        let arr = this.com_time.concat(this.dialogForm.date);
        if (!currentItem.trim()) {
          this.$message({
            message: "请勿添加空值",
            type: "info"
          });
        } else if (this.isRepeat(arr)) {
          this.$message({
            message: "请勿添加重复的值",
            type: "info"
          });
        } else {
          this.dialogForm.date.push("");
        }
      },
      reduceField(index) {
        this.dialogForm.field.splice(index, 1);
      },
      addField(addFieldIndex) {
        let arr = this.ground_name.concat(this.dialogForm.field);
        if (!this.dialogForm.field[addFieldIndex].trim()) {
          this.$message({
            message: "请勿添加空值",
            type: "info"
          });
        } else if (this.isRepeat(arr)) {
          this.$message({
            message: "请勿添加重复的值",
            type: "info"
          });
        } else {
          this.dialogForm.field.push("");
        }
      },
      isRepeat(arr) {
        var hash = {};
        for (var i in arr) {
          if (hash[arr[i]]) return true;
          hash[arr[i]] = true;
        }
        return false;
      },
      verify(v, index) {
        let arr = this.ground_name.concat(this.dialogForm.field);
        if (!v.trim()) {
          this.$message({
            message: "请勿输入空值",
            type: "info"
          });
          return false;
        } else if (this.isRepeat(arr)) {
          this.$message({
            message: "请勿添加重复的值",
            type: "info"
          });
          return false;
        }
        return true;
      },
      teamsRoundSelected(teams, teamsIndex) {
        this.$axios
          .post(
            "/platoon/return_platoon_count", {
              group_id: teams.project_id
            }, {
              headers: {
                token: window.sessionStorage.getItem("token")
              }
            }
          )
          .then(res => {
            if (res.data.code == 2000) {
              for (var i = 0; i < res.data.data.length; i++) {
                // 修改排序问题
                if (
                  typeof res.data.data[i] == "object" &&
                  res.data.data[i] != null
                ) {
                  for (let x in res.data.data[i]) {
                    this.roundsSelected[i][teamsIndex][x].count =
                      res.data.data[i][x];
                    if (
                      this.roundsSelected[i][teamsIndex][x].countLength ==
                      res.data.data[i][x]
                    ) {
                      this.roundsSelected[i][teamsIndex][x].disable = true;
                    }
                  }
                }
              }
            }
          });
      },
      init() {
        for (let i = 0; i <= 10; i++) {
          this.optionsSelect.push({
            value: i,
            label: i
          });
        }
        let obj = {};
        obj.com_id = this.$route.query.MatchId;
        obj.isCheckSchedule = false;
        obj.date = "";
        var initializationTable = new Promise((resolve, reject) => {
          this.$store
            .dispatch("getPlatoonInfo", obj)
            .then(() => {
              this.signTable_PublishCheck() ? reject("当前没有保存签表") : "";
              this.$store
                .dispatch("getPlatoonList", obj)
                .then(() => {
                  resolve();
                })
                .catch(res => {
                  reject(res);
                });
            })
            .catch(res => {
              reject(res);
            });
        });
        initializationTable.then(() => {
          this.date = this.platoonList.time;
          sessionStorage.setItem(
            "roundsSelected",
            JSON.stringify(this.roundsSelected)
          );
          setTimeout(() => {
            if (this.platoonList.place) {
              this.countScene = this.platoonList.place[this.date].length;
              schedule.listToPlayGround(
                this.platoonList.place[this.date],
                this.platoonGrounds,
                this.roundsSelected,
                this.teamsInfo
              );
            } else {
              this.countScene = 0;
            }
            this.loading = false;
          }, 100);
        });
        initializationTable.catch(res => {
          this.loading = false;
          this.$message({
            type: "error",
            message: res
          });
        });
        this.$store.commit("setPlatoonDate", this.date);
      },
      projectChoose(project, index) {
        this.projectSelected = project;
      },
      moreField() {
        schedule.moreField(this.platoonGrounds);
      },
      tipsChange() {},
      scheduleAuto() {
        if (!this.tips) {
          let groundCheckedArr = [];
          let line = []
          for (let i = 0; i < this.platoonName.length; i++) {
            if (this.platoonName[i].checked == true) {
              groundCheckedArr.push(i + 1);
            }
          }
          for (let i = 0; i < this.platoonGrounds.length; i++) {
            if (this.platoonGrounds[i][0].checked == true) {
              line.push(i + 1);
            }
          }
          let uploadArr = [];
          let group = [];
          let groups = [];
          let countDisable = [];
          let is_stage = 0; //判断第二阶段是否有值
          uploadArr.col = this.platoonName.length;
          for (let i in this.roundsSelected) {
            for (let j in this.roundsSelected[i]) {
              for (let z in this.roundsSelected[i][j]) {
                let obj = {};
                if (this.roundsSelected[i][j][z].radio) {
                  if (i == 1) {
                    is_stage = 1;
                  }
                  obj.seed = this.roundsSelected[i][j][z].radio;
                  obj.stage = parseInt(i) + 1;
                  obj.wheel = parseInt(z) + 1;
                  obj.group_id = this.teamsInfo[j].project_id;
                  obj.group_name = this.teamsInfo[j].project;
                  obj.teamsIndex = j;
                  groups.push(this.teamsInfo[j].project_id);
                  group.push(obj);
                  //禁用选项
                  let count = {};
                  count.stage = i;
                  count.teams = j;
                  count.rounds = z;
                  countDisable.push(count);
                }
              }
            }
          }
          this.countDisable = countDisable;
          for (let item in group) {
            let obj = {};
            if (group[item + 1]) {
              if (group[item].seed > group[item + 1].seed) {
                obj = group[item + 1].seed;
                group[item + 1].seed = group[item].seed;
                group[item].seed = obj;
              }
            }
          }
          uploadArr.group = group;
          uploadArr.groups = groups;
          this.$axios
            .post(
              "/Platoon/platoontable", {
                col: uploadArr.col, //共有多少场地数
                group: uploadArr.group, //项目组数
                groups: uploadArr.groups,
                is_stage: is_stage,
                com_id: this.$route.query.MatchId,
                match_date: this.date,
                col_arr: groundCheckedArr,
                row_arr: line
              }, {
                headers: {
                  token: window.sessionStorage.getItem("token")
                }
              }
            )
            .then(res => {
              if (res.data.code == 2000) {
                this.tips = true;
                this.$message({
                  message: "一键排战成功",
                  type: "success"
                });
                let platoonList = res.data.data;
                schedule.listToPlayGround(
                  platoonList,
                  this.platoonGrounds,
                  this.roundsSelected,
                  this.teamsInfo
                );
                for (let i in countDisable) {
                  this.roundsSelected[countDisable[i].stage][
                    countDisable[i].teams
                  ][countDisable[i].rounds].disable = true;
                }
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "error"
                });
              }
            });
        } else {
          this.$message({
            message: "请先保存一键排战的场次",
            type: "info"
          });
        }
      },
      scheduleHandle() {
        if (this.platoonDate == "") {
          if (this.platoonList.date[0]) {
            let date = this.platoonList.date[0];
            this.$store.commit("setPlatoonDate", date);
            for (let games in this.platoonList.place[date]) {
              let col = parseInt(this.platoonList.place[date][games].col) - 1;
              let row = parseInt(this.platoonList.place[date][games].row) - 1;
              let groundLenth = this.platoonGrounds.length - 1;
              for (let times = row; times > groundLenth; times--) {
                this.moreField();
              }
              this.platoonGrounds[row][col].list.push(
                this.platoonList.place[date][games]
              );
            }
            schedule.calcRounds(
              this.platoonGrounds,
              this.roundsSelected,
              this.teamsInfo
            );
          }
        }
        this.$router.push({
          path: "/index/match/scheduleHandle",
          query: {
            MatchId: this.$route.query.MatchId
          }
        });
      },
      //提交修改排战信息
      confirmDialogForm() {
        let arr = this.ground_name.concat(
          this.dialogForm.field,
          this.com_time,
          this.dialogForm.date
        );
        let ground_name = [];
        let com_time = [];
        if (this.dialogForm.date[this.dialogForm.date.length - 1]) {
          com_time = this.com_time.concat(this.dialogForm.date);
        } else {
          com_time = this.com_time;
        }
        if (this.dialogForm.field[this.dialogForm.field.length - 1]) {
          ground_name = this.ground_name.concat(this.dialogForm.field);
        } else {
          ground_name = this.ground_name;
        }
        if (this.isRepeat(com_time)) {
          this.$message({
            message: "您输入的时间有重复值，请重新输入",
            type: "info"
          });
          return;
        }
        if (this.isRepeat(ground_name)) {
          this.$message({
            message: "您输入的场地有重复值，请重新输入",
            type: "info"
          });
          return;
        }
        this.$axios
          .post(
            "/platoon/update_ground_info", {
              com_id: this.$route.query.MatchId,
              ground_name: ground_name,
              com_time: com_time
            }, {
              headers: {
                token: window.sessionStorage.getItem("token")
              }
            }
          )
          .then(res => {
            const {
              code,
              data,
              msg
            } = res.data;
            if (code == 2000) {
              this.dialogFormVisible = false;
              this.$message({
                message: msg,
                type: "success"
              });
              this.change();
            } else {
              this.$message({
                message: msg,
                type: "error"
              });
            }
          });
      },
      //得到比赛时间和场地号
      handleEditschedule() {
        this.dialogForm.date = ['']
        this.dialogForm.field = ['']
        this.$axios
          .post(
            "/platoon/get_ground_info", {
              com_id: this.$route.query.MatchId
            }, {
              headers: {
                token: window.sessionStorage.getItem("token")
              }
            }
          )
          .then(res => {
            const {
              code,
              data,
              msg
            } = res.data;
            if (code == 2000) {
              this.com_time = data.com_time;
              this.ground_name = data.ground_name;
              this.dialogFormVisible = true;
            } else {
              this.$message({
                message: msg,
                type: "error"
              });
            }
          });
      },
      //取消未发布比赛
      cancelSchedule() {
        this.$confirm("您确定取消未发布的比赛?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true
          })
          .then(() => {
            this.$axios
              .post(
                "/Platoon/cancel_all_match", {
                  com_id: this.$route.query.MatchId,
                  time: this.date
                }, {
                  headers: {
                    token: window.sessionStorage.getItem("token")
                  }
                }
              )
              .then(res => {
                const {
                  code,
                  data,
                  msg
                } = res.data;
                if (code == 2000) {
                  this.$message({
                    message: msg,
                    type: "success"
                  });
                  this.change();
                } else {
                  this.$message({
                    message: msg,
                    type: "error"
                  });
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "您已取消操作"
            });
          });
      },
      pushAutoSchedule() {
        //发布编排
        this.$confirm("注意每场比赛开始时间，确定保存?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true
          })
          .then(() => {
            let uploadObj = schedule.makePublishObj(
              this.platoonGrounds,
              this.date
            );
            // return
            this.$axios
              .post("/Platoon/go_to_ground", uploadObj, {
                headers: {
                  token: window.sessionStorage.getItem("token")
                }
              })
              .then(res => {
                if (res.data.code == 2001) {
                  this.$message({
                    message: res.data.msg,
                    type: "success"
                  });
                  this.$router.push({
                    path: "/index/match/checkSchedule",
                    query: {
                      MatchId: this.$route.query.MatchId
                    }
                  });
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "error"
                  });
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "您已取消"
            });
          });
      },
      getMatchSelectClick() {
        var myDate = new Date();
        let matchDate = myDate.getFullYear() + "-" + myDate.getMonth() + "-" + 25;
        this.$axios
          .get("/Platoon/index", {
            params: {
              com_id: 1,
              date: matchDate
            }
          })
          .then(result => {
            console.log(result);
          });
      },
      CurentTime: function() {
        var now = new Date();
        var year = now.getFullYear(); //年
        var month = now.getMonth() + 1; //月
        var day = now.getDate(); //日
        var hh = now.getHours(); //时
        var mm = now.getMinutes(); //分
        var clock = year + "-";
        if (month < 10) clock += "0";
        clock += month + "-";
        if (day < 10) clock += "0";
        clock += day;
        return clock;
      },
      signTable_PublishCheck() {
        let count = 0;
        for (let i in this.platoonInfo) {
          if (this.platoonInfo[i].check_signs == 0) count++; //检查签表发布
        }
        if (count == this.platoonInfo.length) return true;
        if (count != this.platoonInfo.length) return false;
      },
      change() {
        this.loading = true;
        let teamsInfo = [];
        this.$store.commit("setTeamsInfo", teamsInfo);
        let obj = {};
        obj.com_id = this.$route.query.MatchId;
        obj.isCheckSchedule = false;
        obj.date = this.date;
        obj.limit = 1;
        let roundsSelected = JSON.parse(JSON.stringify(this.roundsSelected));
        sessionStorage.setItem(
          "roundsSelected",
          JSON.stringify(this.roundsSelected)
        );
        var initializationTable = new Promise((resolve, reject) => {
          this.$store
            .dispatch("getPlatoonInfo", obj)
            .then(() => {
              this.signTable_PublishCheck() ? reject("当前没有保存签表") : "";
              this.$store
                .dispatch("getPlatoonList", obj)
                .then(() => {
                  resolve();
                })
                .catch(res => {
                  reject(res);
                });
            })
            .catch(res => {
              reject(res);
            });
        });
        initializationTable.then(() => {
          setTimeout(() => {
            if (this.platoonList.place) {
              this.countScene = this.platoonList.place[this.date].length;
              schedule.listToPlayGround(
                this.platoonList.place[this.date],
                this.platoonGrounds,
                this.roundsSelected,
                this.teamsInfo
              );
            } else {
              this.countScene = 0;
            }
            this.loading = false;
          }, 100);
        });
        initializationTable.catch(res => {
          this.loading = false;
          this.$message({
            type: "error",
            message: res
          });
        });
        this.$store.commit("setPlatoonDate", this.date);
      }
    }
  };
</script>
<style lang="less" scoped>
  .customColor {
    position: absolute;
    right: -15px;
    bottom: -15px;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
  }
	// .el-scrollbar{
	// 	.el-scrollbar__bar .is-horizontal{
	// 		height:20px!important;
	// 		left:2px;
	// 		background-color: red;
	// 	}
	// }
	.scrollbar{
		background: red;
	}
	
  .winner {
    color: #409eff;
  }

  .gray {
    background-color: #fff;
    border-color: #fff;
    color: #c0c4cc;
  }

  .scoreAll {
    padding: 20px;
    padding-bottom: 50px;

    .basicInfo {
      background: linear-gradient(90deg,
        rgba(66, 185, 131, 0.2),
        rgba(66, 185, 131, 0.4));
      border-radius: 2px;
      line-height: 30px;
      height: 30px;
      padding: 15px;
      overflow: hidden;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .countScene {
        margin-right: 0;
      }

      span {
        margin-right: 20px;
      }

      .btnGroup {
        margin-right: 20px;
      }

      .date {
        width: 170px;
        padding: 10px 15px;
      }
    }

    .tableBox {
      margin-top: 10px;
      padding-bottom: 10px;

      .group {
        height: 40px;
        background-color: #f5f7fa;
        border-bottom: #727272;

        li {
          float: left;
          cursor: pointer;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #727272;
          padding: 0 10px;
        }

        li:first-child {
          border-right: 1px solid #eaeaea;
          border-bottom: 0;
          background-color: #fff;
          color: #409eff;
        }

        li:hover {
          color: #409eff;
        }

        .hasClick {
          background-color: #409eff;
          color: #fff;
        }
      }

      .tableMain {
        margin-top: 10px;

        .table1 {
          margin-top: 10px;
          text-align: center;
          border-collapse: collapse;
          border-left: 1px solid #eaeaea;
          border-top: 1px solid #eaeaea;
          margin-bottom: 19px;

          thead {
            tr {
              height: 30px;
              width: 120px;
              background-color: rgba(66, 185, 131, 0.2);

              td {
                width: 120px;
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
              }
            }
          }

          tbody {
            tr {
              height: 40px;
              width: 120px;

              .projectBtn:hover {
                transition: 0.5s;
                background: #afd6ff;
                color: #666666;
              }

              .projectBtnSelect {
                background: #409eff;
                color: #ffffff;
              }

              td {
                width: 120px;
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
                transition: all 0.2s ease-out;
              }

              td:hover {
                transition: 0.5s;
                background: #afd6ff;
                color: #666666;
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
              }

              td:active {
                transition: 0.5s;
                background: #67b2ff;
                color: #fff;
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
              }

              td:first-child {
                width: 150px;
              }

              td:nth-child(2) {
                width: 120px;
              }
            }
          }
        }

        .panel__body--list {
          width: 100%;
          height: 50px;

          .panel__body--item {
            height: 40px;
            border: 1px solid #eaeaea;
            box-shadow: 0px 3px 4px #eaeaea;
            float: left;
            line-height: 40px;
            text-align: center;
            color: #409eff;
            padding: 0 5px;
            margin-right: 10px;
          }

          .sortable-drag {
            height: 40px;
            border: 1px solid #eaeaea;
            box-shadow: 0px 3px 4px #eaeaea;
            float: left;
            line-height: 40px;
            text-align: center;
            background: #409eff;
            color: #fff;
            padding: 0 5px;
          }
        }

        .field {
          box-shadow: 7px 0px 13px 2px #9999;
          margin-top: 10px;
          width: 100%;
          height: 100px;
          text-align: center;
          border-collapse: collapse;
          border-left: 1px solid #eaeaea;
          border-top: 1px solid #eaeaea;
          margin-bottom: 50px;
          position: relative;
          table-layout: fixed;

          .morebox {
            position: absolute;
            height: 5px;
            width: 100%;
            background-color: #eaeaea;
            transition: all 0.5s;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
            .more {
              position: absolute;
              bottom: -13px;
              height: 30px;
              background-color: #727272;
              border-radius: 15px;
              width: 30px;
              line-height: 30px;
							font-size: 24rpx;
							font-weight: 700;
              color: #fff;
              left: 50%;
              margin-left: -15px;
              transition: all 0.5s;
            }
          }

          .morebox:hover {
            .more {
              background-color: #727272;
            }

            cursor: pointer;
            background-color: #727272;
          }

          thead {
            tr {
              height: 40px;
              background-color: rgba(66, 185, 131, 0.2);

              td {
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
                width: 164px;
              }

              td:first-child {
                width: 63px;
                overflow: hidden;
              }
            }
          }

          tbody {
            tr {
              width: 100%;
              height: 130px;

              td {
                width: 163px;
                vertical-align: top;
                border-right: 1px solid #eaeaea;
                border-bottom: 1px solid #eaeaea;
                box-sizing: border-box;

                .panel__body--list--playground {
                  width: 100%;
                  height: 160px;
                  overflow: hidden;

                  .panel__body--item--playground {
                    height: 156px;
                    width: 100%;
                    border: 1px solid #eaeaea;
                    box-shadow: 0px 3px 4px #eaeaea;
                    float: left;
                    text-align: center;
                    color: #409eff;

                    .battleBox {
                      display: flex;
                      flex-direction: column;
                      height: 100%;

                      .playerName {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 90px;
                        overflow: hidden;
                        white-space: nowrap;

                        .vsGround {
                          text-align: left;
                          margin: 0 15%;
                          height: 36px;
                          display: flex;
                          align-items: center;
                          border-bottom: 1px dashed rgba(102, 102, 102, 0.4);
                          border-top: 1px dashed rgba(102, 102, 102, 0.4);

                          .VS {
                            height: 100%;
                            border-right: 1px dashed #6666;
                            line-height: 36px;
                            padding-right: 6%;
                            padding-left: 4%;
                          }

                          .numBox {
                            flex: 1;
                            height: 100%;
                            border-right: 1px dashed #6666;
                            text-align: center;

                            .numTop {
                              height: 50%;
                              border-bottom: 1px dashed #6666;
                            }
                          }
                        }
                      }

                      .playerInfo {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        height: 60px;
                        font-size: 12px;
                      }
                    }
                  }

                  .sortable-drag--playground {
                    border: 1px solid #eaeaea;
                    box-shadow: 0px 3px 4px #eaeaea;
                    width: 100%;
                    height: 160px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    overflow: hidden;
                    text-align: center;
                    background: #409eff;
                    color: #fff;
                    padding: 0 5px;
                  }
                }
              }
            }
          }
        }
      }
    }

    .btnBottom {
      width: 100%;
      height: 60px;
      line-height: 60px;
      text-align: center;
      margin-top: 30px;
    }
  }

  @header_background_color: rgba(66, 185, 131, 0.2);
  @header_text_color: #000;
  @alternate_row_background_color: #ddd;

  @table_width: 100%;
  @table_body_height: 750px;
  @column_one_width: 50px;
  @column_two_width: 164px;
  @column_three_width: 350px;

  .tableScorll {
    min-height: 700px;
    min-width: 80%;
  }

  .fixed_headers {
    table-layout: fixed;
    border-collapse: collapse;

    thead {
      background-color: @header_background_color;
      color: @header_text_color;

      tr {
        display: block;
        position: relative;

        th,
        td {
          padding: 5px 0;
          min-width: 163px;
          border-right: 1px solid #eaeaea;
        }

        td:nth-child(1),
        th:nth-child(1) {
          min-width: @column_one_width;
        }
      }
    }

    tbody {
      display: block;
      overflow: auto;
      width: 100%;
      height: @table_body_height;

      th,
      td {
        min-width: @column_two_width;

        .panel__body--list--playground {
          width: 163px;
          height: 149px;
          overflow: hidden;
          border-right: 1px solid #eaeaea;
          border-bottom: 1px solid #eaeaea;

          .panel__body--item--playground {
            height: 148px;
            width: 100%;
            box-shadow: 0px 2px 2px #eaeaea;
            float: left;
            text-align: center;
            color: #409eff;

            .battleBox {
              display: flex;
              flex-direction: column;
              height: 100%;

              .playerName {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                // height: 72px; //150 - 28 - 90 - 50
                height: 90px;
                overflow: hidden;
                white-space: nowrap;

                .vsGround {
                  text-align: left;
                  margin: 0 15%;
                  height: 36px;
                  display: flex;
                  align-items: center;
                  border-bottom: 1px dashed rgba(102, 102, 102, 0.4);
                  border-top: 1px dashed rgba(102, 102, 102, 0.4);

                  .VS {
                    height: 100%;
                    border-right: 1px dashed #6666;
                    line-height: 36px;
                    padding-right: 6%;
                    padding-left: 4%;
                  }

                  .numBox {
                    flex: 1;
                    height: 100%;
                    border-right: 1px dashed #6666;
                    text-align: center;

                    .numTop {
                      height: 50%;
                      border-bottom: 1px dashed #6666;
                    }
                  }
                }
              }

              .playerInfo {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 50px;
                font-size: 12px;
              }
            }
          }

          .sortable-drag--playground {
            border: 1px solid #eaeaea;
            box-shadow: 0px 3px 4px #eaeaea;
            width: 100%;
            height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            text-align: center;
            background: #409eff;
            color: #fff;
            padding: 0 5px;
          }
        }
      }

      td:nth-child(1),
      th:nth-child(1) {
        min-width: @column_one_width;
        height: 49px;
        position: relative;
        border-right: 1px solid #eaeaea;

        .groundIndex {
          width: 49px;
          height: 149px;
          overflow: hidden;
          line-height: 149px;
        }
      }
    }

    .morebox {
      position: absolute;
      height: 5px;
      width: 100%;
      background-color: #eaeaea;
      transition: all 0.5s;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
      .more {
				font-size: 24px;
				font-weight: 700;
        position: absolute;
        bottom: -13px;
        height: 30px;
        background-color: #727272;
        border-radius: 15px;
        width: 30px;
        line-height: 30px;
        color: #fff;
        left: 50%;
        margin-left: -15px;
        transition: all 0.5s;
      }
    }

    .morebox:hover {
      .more {
        background-color: #727272;
      }

      cursor: pointer;
      background-color: #727272;
    }
  }

  .old_ie_wrapper {
    height: @table_body_height;
    width: @table_width;
    overflow-x: hidden;
    overflow-y: auto;

    tbody {
      height: auto;
    }
  }
</style>
